<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			.img-wrap {
				background-color: lightblue;
				position: relative;
				width: 300px;
				height: 300px;
				margin: 12px auto 0px;
				overflow: hidden;
			}
			
			.img-wrap ul {
				list-style: none;
			}
			
			.img-wrap .img-lunbo li {
				position: absolute;
				width: 300px;
				height: 300px;
				top: 0px;
				left: 0px;
				float: left;
			}
			
			.img-wrap .lunbo {
				width: 300px;
				height: 300px;
			}
			
			.img-wrap .img-btn {
				position: absolute;
				width: 120px;
				height: 30px;
				left: 90px;
				bottom: 2px;
			}
			
			.img-wrap .btn {
				float: left;
				width: 8px;
				height: 8px;
				background-color: #efefef;
				border: 2px solid #dedede;
				border-radius: 50%;
				margin: 0px 4px;
			}
			
			.img-wrap .img-btn .active {
				background-color: #4a4a4a;
			}
		</style>
		
		<script>
			window.onload = function(){
				var index = 0;
				setInterval(function(){
					index++;
					var images = document.getElementsByClassName("lunbo");
					var ul = document.getElementsByClassName("img-lunbo")[0].getElementsByTagName("ul")[0];
					var width = ul.getElementsByTagName("li")[0].scrollWidth;
					if (index >= images.length) index = 0;
					for (var i = 0, len = images.length; i < len; i++) {
						if (index == i) {
							document.getElementsByClassName("img-btn")[0].getElementsByClassName("btn")[i].className = "btn active";
						} else {
							document.getElementsByClassName("img-btn")[0].getElementsByClassName("btn")[i].className = "btn";
						}
						var marginLeft = (index - i) * width;
						ul.getElementsByTagName("li")[i].style.marginLeft = marginLeft + "px";
					}
				}, 3000);
			}
		</script>
	</head>
	<body>
		<div class="img-wrap">
			<div class="img-lunbo">
				<ul>
					<li><img src="../img/01.jpg" class="lunbo" /></li>
					<li><img src="../img/02.jpg" class="lunbo" /></li>
					<li><img src="../img/03.jpg" class="lunbo" /></li>
					<li><img src="../img/04.jpg" class="lunbo" /></li>
					<li><img src="../img/05.jpg" class="lunbo" /></li>
				</ul>
			</div>
			<div class="img-btn">
				<ul>
					<li class="btn active"></li>
					<li class="btn"></li>
					<li class="btn"></li>
					<li class="btn"></li>
					<li class="btn"></li>
				</ul>
			</div>
		</div>
	</body>
</html>
